<template>
  <div class="main" v-if="gdetail">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in gdetail.data.album" :key="index">
        <img :src="item.src" alt="" />
      </van-swipe-item>
    </van-swipe>
    <p class="arrow_left" @click="handleBackPage">
      <van-icon name="arrow-left" class="iconLeft" size="0.2rem" color="#fff" />
    </p>
    <p class="home">
      <router-link to="/">
        <van-icon
          class="iconhome"
          name="wap-home-o"
          size="0.2rem"
          color="#fff"
        />
      </router-link>
    </p>
    <div class="value">
      <div class="flex">
        <span class="maarket" v-if="gdetail.market_data.data">{{
          gdetail.market_data.data.activityTitle
        }}</span>
        <div class="flex-item">
          <p class="ellipsis">
            <span class="ellipsis-1">
              <span>￥</span>
              <span>{{ gdetail.data.goods.lowPriceInt }}</span>
            </span>
            <span class="ellipsis-2"> (起) </span>
            <span class="ellipsis-3">
              <span>￥</span>
              <span>{{ gdetail.data.goods.lowPriceInt }}</span>
            </span>
          </p>
          <p class="rest-price">
            {{ gdetail.market_data.data.tag }}
          </p>
        </div>
        <p class="lable">
          限购<span>{{ gdetail.market_data.data.singleLimit }}</span
          >件
        </p>
      </div>
    </div>
    <div class="desc">
      <p class="info">
        {{ gdetail.data.goods.name }}
      </p>
      <p class="brize">
        {{ gdetail.data.goods.brief }}
      </p>
    </div>
    <div class="couplus">
      <div class="lang-lable">满减</div>
      <div class="lang-con">
        <div
          class="lang-con-item-1"
          v-for="(iter, index) in gdetail.promotions"
          :key="index"
        >
          <span class="lable">{{ iter.tag }}</span>
          <span class="singe">{{ iter.name }}</span>
        </div>
      </div>
    </div>
    <div class="advantages">
      <span class="singe-advantages">服务</span>
      <p class="singe-advantages-con">
        <span class="item-con">15天退换货承诺</span>
        <span class="item-con">顺丰直达（部分地区EMS)</span>
        <span class="item-con">1年质保</span>
        <span class="item-con">正规发票</span>
        <span class="item-con">正品保障</span>
      </p>
    </div>
    <div class="base-comment">
      <div class="base-comment-title">卖家评论(<span>135</span>)</div>
      <div class="base-comment-line">z*****j</div>
      <div class="rate-comment"></div>
      <div class="rate-line">不错</div>
      <div class="color-light-gray">
        <span>2021-09-10</span>
        <span>套装:单品 </span>
      </div>
      <div class="mg">
        <img
          src="https://mfs.ys7.com/mall/2536328a64a85bfb59d8b3125c656bd1_small.jpeg"
          alt=""
        />
      </div>
    </div>

    <van-goods-action>
      <span class="showCount" v-show="allGoodsCount">{{
        allGoodsCount
      }}</span>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="goShopping" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="onClickIcon(1)"
      />
      <van-goods-action-button
        type="danger"
        @click="onClickIcon(2)"
        text="立即购买"
      />
    </van-goods-action>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block" v-if="gtion">
          <div class="sku-info">
            <div class="img">
              <img :src="gtion.good_img" alt="" />
            </div>
            <div class="flex-item-1">
              <p class="p1">{{ price }}</p>
              <p class="p2">{{ prices }}</p>
            </div>
          </div>
          <div class="box">
            <div class="bor" v-for="(itm, indx) in gtion.good_spec" :key="indx">
              <div class="item-label">{{ itm.spec_name }}</div>
              <div>
                <span
                  v-for="(item, index) in itm.spec_item"
                  :key="index"
                  @click="pricese(indx, index)"
                  :class="{ bg: bgs[indx] == item.spec_value_id }"
                  >{{ item.value }}
                </span>
              </div>
            </div>
            <div class="item-label">
              <p class="item-label">数量</p>
              <br />
              <button @click="Reduction">-</button>
              <button>{{ num }}</button>
              <button @click="add">+</button>
            </div>
          </div>

          <div class="ys-button" @click="determine">确定</div>
          <van-icon
            name="clear"
            class="clear"
            color="#ccc"
            @click="show = false"
          />
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import axios from "axios";
import { Toast, Badge } from "vant";

// import qs from require;
export default {
  data() {
    return {
      gdetail: null,
      show: false,
      touchable: true,
      gtion: null,
      species: "",
      num: 1,
      bgs: [],
      Idx: "",
      trl: "",
      id: "",
      userId: 0,
    };
  },
  computed: {
    price() {
      let result = "";
      if (this.bgs.indexOf(0) != -1) {
        result = this.gtion.good_price.sale_price_desc;
      } else {
        let priObj = JSON.parse(this.gtion.spec_info.info.replace(/\\/, ""));
        let priObjMatch = JSON.parse(
          this.gtion.spec_info.is_buy.replace(/\\/, "")
        );
        for (var i in priObjMatch) {
          if (priObjMatch[i].toString() == this.bgs.slice().toString()) {
            result = "￥" + priObj[i].sale_price;
            break;
          }
        }
      }
      return result;
    },
    prices() {
      let result = "";
      if (
        this.bgs.every((val) => {
          return val == 0;
        })
      ) {
        result = "请选择商品规格";
      } else {
        let str = "已选择：";
        this.bgs.forEach((val, idx) => {
          // console.log(val);
          if (val != 0) {
            for (
              let i = 0;
              i < this.gtion.good_spec[idx].spec_item.length;
              i++
            ) {
              //  console.log(this.gtion.good_spec[idx].spec_item[i].spec_value_id);
              if (this.gtion.good_spec[idx].spec_item[i].spec_value_id == val) {
                str += '"' + this.gtion.good_spec[idx].spec_item[i].value + '"';
              }
            }
          }
        });
        result = str;
      }
      return result;
    },
    allGoodsCount() {
      return this.$store.getters["huang/allGoodsCount"];
    },
    mygoods(){
      return this.$store.state.huang.cartGoods;
    }
  },
  methods: {
    handleHome(path) {
      this.$router.push(path);
    },
    goShopping() {
      this.$router.push("/shopping");
    },
    determine() {
      let { Idx } = this;
      if (Idx == 1) {
        let { id, bgs, num,userId,gtion } = this;
        let gdetail = {};
        // let gtion = {};
        gdetail.name = this.gdetail.data.goods.name;
        gdetail.image_url = this.gdetail.data.goods.image_url;
        console.log(bgs);
        if (
          this.bgs.every((val) => {
            return val != 0;
          })
        ) {
          let newgood = {
            userId,
            id,
            bgs,
            num,
            gtion,
            gdetail,
            isChecked: true,
          };
          this.$store.dispatch("huang/cartChangeAct",{Idx,newgood});
          Toast.success("加入成功");
          this.show = false;
          this.bgs = [];
        } else {
          Toast.fail("选择商品规格");
        }
      }

      if (Idx == 2) {
        let { num, price, prices, gtion, gdetail } = this;
        let img = this.gtion.good_img;
        let name = this.gdetail.data.goods.name;
        // console.log(num, price, prices, img, name, img);
        let scli = this.price.slice(1,4)
        this.$store.commit("address/addrgoods", {
          num,
          scli,
          prices,
          img,
          name,
          img,
        });
        this.$router.push("/checkouts");
      }
    },
    add() {
      this.num++;
      if (this.num >= this.gdetail.market_data.data.singleLimit) {
        this.num = this.gdetail.market_data.data.singleLimit;
      }
    },
    Reduction() {
      this.num--;
      if (this.num <= 1) {
        this.num = 1;
      }
    },
    pricese(ind, i) {
      // this.prices = false;
      let itemId = this.gtion.good_spec[ind].spec_item[i].spec_value_id;
      this.bgs[ind] == itemId
        ? this.bgs.splice(ind, 1, 0)
        : this.bgs.splice(ind, 1, itemId);
      // console.log(this.price);
    },
    onClickIcon(i) {
      // console.log(this.gtion)
      let { bgs } = this;

      if (this.userId) {
        this.show = true;
        var axios = require("axios");
        var qs = require("qs");
        let { id } = this.$route.params;
        // console.log(id);
        var data = qs.stringify({
          good_id: id,
          _csrf: " YVZWZUczbjRTODhTD1YeTTgxIA4fZjlzLwwQUyYHC00nBzwdDl0LWQ==",
          service_support: " 1",
          source: " 0",
        });
        var config = {
          method: "post",
          url: "/yingshi/goods/get-spec.html",
          data: data,
        };

        axios(config)
          .then(function (response) {
            return response.data.data;
          })
          .then((res) => {
            // console.log(res);
            this.gtion = res;
            res.good_spec.forEach((val) => {
              this.bgs.push(0);
            });
          });
        this.Idx = i;
      } else {
        Toast.fail("请先登录！");
        this.$store.commit("huang/changeFromMut", this.id);
        this.$router.push("/login");
      }
    },
  },
  created() {
    sessionStorage.userinfo && (this.userId = JSON.parse(sessionStorage.userinfo)._id);
    let { id } = this.$route.params;
    // console.log(id);
    // console.log(id);
    this.id = id;
    let url1 = `https://m.ys7.com/goods/goods-info.html?goods_id=${id}`;
    axios({
      url: url1,
      headers: {},
    }).then((res) => {
      // console.log(res);
      this.gdetail = res.data.data;
    });
  },
};
</script>

<style lang="less" scoped>
.arrow_left,
.home {
  position: fixed;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 0.15rem;
  background-color: rgba(1, 1, 1, 0.3);
}
.arrow_left {
  top: 0.15rem;
  left: 0.15rem;
}
.home {
  right: 0.15rem;
  top: 0.15rem;
}
.arrow_left .iconLeft {
  text-align: center;
  line-height: 0.3rem;
  padding-left: 0.03rem;
}
.iconhome {
  padding-left: 0.06rem;
  line-height: 0.3rem;
}
.van-goods-action {
  .showCount {
    width: 0.16rem;
    height: 0.16rem;
    border-radius: 50%;
    background: red;
    color: white;
    font-size: 0.04rem;
    text-align: center;
    line-height: 0.16rem;
    position: absolute;
    top: 0.02rem;
    left: 0.8rem;
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.bg {
  background: #fa6c2f !important;
  color: #fff !important;
}
.box {
  overflow-y: auto;
  height: 3rem;
}
.block {
  position: fixed;
  bottom: 0;
  border-radius: 0.15rem 0.15rem 0 0;
  width: 3.75rem;
  padding: 0.15rem 0.15rem 0.75rem;
  box-sizing: border-box;
  height: 4.75rem;
  background-color: #fff;

  .sku-info {
    height: 0.75rem;
    display: flex;
    .img {
      width: 0.75rem;
      height: 0.75rem;
      margin-right: 0.15rem;
      background: burlywood;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .flex-item-1 {
      width: 2.55rem;
      height: 0.75rem;
      padding: 0.13rem;
      box-sizing: border-box;
      p {
        width: 2.55rem;
        height: 0.2rem;
        margin-bottom: 0.08rem;
      }
      .p1 {
        color: #fa6c2f;
      }
    }
  }
  .item-label {
    height: 0.25rem;
    margin: 0.3rem 0 0.08rem 0;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    button {
      width: 0.5rem;
      height: 0.5rem;
      border: none;
      margin: 0.05rem;
    }
    button:nth-last-of-type(1) {
      border-radius: 0 0.25rem 0.25rem 0;
    }
    button:nth-last-of-type(3) {
      border-radius: 0.25rem 0 0 0.25rem;
    }
  }
  div {
    min-height: 0.32rem;
    span {
      background: #f4f4f4;
      color: #333;
      display: inline-block;
      padding: 0.05rem 0.2rem;
      margin: 0 0.15rem 0.15rem 0;
      border-radius: 0.15rem;
      font-size: 15px;
    }
  }
  .ys-button {
    width: 3.45rem;

    height: 0.44rem;
    background: #fa6c2f;
    border-radius: 0.37rem;
    position: absolute;
    bottom: 0;
    z-index: 15;
    color: #fff;
    text-align: center;
    line-height: 0.44rem;
  }
  i {
    font-size: 0.25rem;
    border-radius: 50%;
    position: absolute;
    top: 0.25rem;
    right: 0.2rem;
  }
}
// .main:nth-last-of-type()
.main {
  background: #ddd;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 3.75rem;
  text-align: center;
  background-color: #39a9ed;
  height: 3.75rem;
  img {
    width: 3.75rem;
    height: 3.75rem;
  }
}
.value {
  height: 0.6rem;
  padding: 0.1rem 0.15rem;
  background: -webkit-linear-gradient(229deg, #ffa740 0%, #fa6c2f 100%);
  .flex {
    width: 3.15rem;
    height: 0.48rem;
    display: flex;
    justify-content: space-between;
    .maarket {
      display: inline-block;
      width: 0.84rem;
      height: 0.24rem;
      border-radius: 0.12rem;
      background: #fff;
      color: #fd783f;
      font-weight: bold;
      text-align: center;
      font-size: 14px;
      margin-right: 0.1rem;
    }
    .flex-item {
      width: 1.78rem;
      height: 0.48rem;
      .ellipsis {
        width: 1.58rem;
        height: 0.24rem;
        padding-bottom: 0.1rem;
        .ellipsis-1 {
          color: #f8e71c;
          font-size: 24px;
        }
        .ellipsis-2 {
          color: #f8e71c;
          font-size: 16px;
        }
        .ellipsis-3 {
          color: #d35d07;
          font-size: 16px;
          text-decoration: line-through;
        }
      }
      .rest-price {
        font-size: 16px;
        color: #fff;
      }
    }
    .lable {
      width: 1rem;
      height: 0.24rem;
      color: #fff;
      font-size: 14px;
      background: #e96a13;
      padding: 0 0.1rem;
      box-sizing: border-box;
      border-radius: 0.12rem;
      line-height: 0.24rem;
      text-align: center;
    }
  }
}
.desc {
  background: #fff;
  min-height: 1.3rem;
  padding: 0.15rem;
  box-sizing: border-box;
  .info {
    color: #333;
    font-size: 18px;
    font-weight: 700;
  }
  .brize {
    color: #999;
    font-size: 14px;
    margin-top: 4px;
  }
}
.couplus {
  //   width: 3.75rem;
  height: 0.9rem;
  margin-top: 0.1rem;
  padding: 0.15rem;
  box-sizing: border-box;
  background: #fff;
  display: flex;
  .lang-lable {
    width: 0.55rem;
    height: 0.6rem;
    color: #333;
    font-size: 14px;
    font-weight: bold;
  }
  .lang-con {
    width: 2.8rem;
    height: 0.6rem;
    .lang-con-item-1 {
      width: 2.8rem;
      height: 0.37rem;
      padding-bottom: 0.15rem;
      box-sizing: border-box;
      .lable {
        display: inline-block;
        width: 0.3rem;
        height: 0.2rem;
        background: #ffe9d9;
        color: #ff6e18;
        font-size: 12px;
        margin-right: 0.05rem;
        text-align: center;
      }
      .singe {
        color: #333;
        font-size: 14px;
      }
    }
  }
}
.advantages {
  height: 0.76rem;
  margin-top: 0.1rem;
  padding: 0.15rem;
  box-sizing: border-box;
  background: #fff;
  display: flex;
  .singe-advantages {
    display: inline-block;
    width: 0.55rem;
    height: 0.46rem;
    font-size: 14px;
    font-weight: bold;
  }
  .singe-advantages-con {
    width: 2.9rem;
    height: 0.46rem;
    .item-con {
      display: inline-block;
      height: 0.23rem;
      line-height: 0.23rem;
      padding: 0 0.05rem;
      font-size: 14px;
    }
  }
}
.base-comment {
  height: 2.84rem;
  margin-top: 0.1rem;
  padding: 00.15rem;
  background: #fff;
  .base-comment-title {
    height: 0.28rem;
    margin-bottom: 0.08rem;
    font-size: 18px;
    color: #333;
    font-weight: bold;
  }
  .base-comment-line {
    font-size: 0.14rem;
    color: #333;
    font-weight: bold;
    margin-bottom: 0.05rem;
  }
  .rate-comment {
    height: 0.15rem;
    margin-bottom: 0.05rem;
  }
  .rate-line {
    color: #333;
    font-size: 14px;
  }
  .color-light-gray {
    height: 0.21rem;
    font-size: 14px;
    color: #999;
  }
  .mg {
    height: 0.93rem;
    padding: 0.15rem 0;
    img {
      width: 0.78rem;
      height: 0.78rem;
      background: brown;
    }
  }
}
.van-goods-action-button--danger {
  background: #fd783f;
}
</style>